/* Most things drag the window around. */
body {
  -webkit-app-region: drag;
  -webkit-user-select: none;
  padding: 0;
  text-align: center;
  margin: 0;
  position: relative;
}

/* Buttons and inputs don't drag the window around */
button, input {
  -webkit-app-region: no-drag;
}

/* Neither do fake-terminals and everything in them */
.marked > *,
.fake-terminal,
.fake-terminal * {
  -webkit-app-region: no-drag;
  -webkit-user-select: text;
}

li {
  margin: 20px;
}

.marked li {
  margin: 0;
}

ul.horizontal {
  display: block;
}

ul.horizontal li {
  display: inline-block;
}

.setup {
  font-size: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
}

.setup .setup-inner {
  overflow: hidden;
  overflow-y: auto;
  padding: 20px;
}

.setup button.btn-setup-action {
  font-size: 16px;
  white-space: nowrap;
  margin: 20px 5px;
}

.setup .fake-terminal {
  width: 85%;
  margin: 20px auto;
}

.setup .faded {
  color: #888888;
}

.setup .warning {
  color: #ffab72;
}

.python-test-input input {
  transition: background-color 0.4s;
}

.setup-loading-icon {
  transition: opacity 2s;
}

.setup .input-group {
  display: table;
}

.setup .input-group-container {
  display: table-cell;
  vertical-align: middle;
  width: 1%; /* takes the least amount of space */
}

.setup .explanation {
  width: 80%;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.setup .secondary-explanation {
  text-align: left;
  width: 80%;
  margin: 40px auto;
  box-shadow: 2px 2px 4px #ccc;
  border: 1px solid #ccc;
  padding: 5px 10px;
}

.setup .brand img {
  width: auto;
  margin-right: auto;
  margin-left: auto;
  height: 200px;
}

.setup-appear {
  opacity: 0.01;
}

.setup-appear.setup-appear-active {
  opacity: 1;
  transition: opacity 0.2s ease-in;
}

.setup-enter {
  opacity: 0.01;
}

.setup-enter.setup-enter-active {
  opacity: 1;
  transition: opacity 0.2s ease-in;
}

.setup-leave {
  opacity: 1;
}

.setup-leave.setup-leave-active {
  opacity: 0.01;
  transition: opacity 0.2s ease-in;
}

.setup .input-python-cmd {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}

.setup .progress {
  margin-top: 40px;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  height: 20px;
}

.setup .btn.btn-primary {
  color: #fff;
  animation: setup-best-action 1s linear infinite;
}

.setup .btn {
  color: #666;
}

@keyframes setup-best-action {
  0% {
    box-shadow: 1px 1px 1px 1px rgb(178, 206, 237);
  }
  50% {
    box-shadow: 1px 1px 15px 1px rgb(178, 206, 237);
  }
  100% {
    box-shadow: 1px 1px 1px 1px rgb(178, 206, 237);
  }
}
